<template>
  <div class="info">
    <div
      class="form-pic"
      v-if="!isSucc && (mainPicList.length > 0 || lists.length > 0)"
    >
      <!-- 主图 -->
      <div class="main-pic" v-if="mainPicList.length > 0">
        <van-swipe :autoplay="2000" :style="`height:${$toRem(200)};`">
          <van-swipe-item v-for="(image, index) in mainPicList" :key="index">
            <img ref="swipeImgRef" :src="image.path" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="form-box">
        <div class="title">请完善以下信息</div>
        <!-- 手机号 -->
        <div v-for="(item, index) in lists" :key="index">
          <template v-if="item.formType === 'boolean_value' && item.defaultValue === '1'">
            <van-field
              v-model="phone"
              type="text"
              label="手机号"
              placeholder="请输入手机号"
              :required="true"
            >
              <template #button>
                <van-button
                  class="yzmBtn"
                  type="primary"
                  :disabled="isDisabledYzmBtn"
                  @click="getCode"
                  >{{ yzmBtnText }}</van-button
                >
              </template>
            </van-field>
            <!-- 验证码 -->
            <van-field
              v-model="code"
              v-if="isDisabledCode"
              type="number"
              label="验证码"
              placeholder="请输入验证码"
              :required="true"
            />
          </template>
          <!-- 文本 -->
          <van-field
            class="cusField cusField1"
            v-model="item.value"
            v-if="item.formType === 'text' || item.formType === 'email'"
            type="text"
            :required="item.isNull === 1"
            :label="item.name"
            :placeholder="item.inputTips || `请输入${item.name}`"
            :readonly="item.fieldName === 'leadsName'"
          />
          <!-- 富文本 -->
          <van-field
            :required="item.isNull === 1"
            v-else-if="item.formType === 'textarea'"
            v-model="item.value"
            rows="2"
            autosize
            :label="item.name"
            type="textarea"
            maxlength="500"
            :placeholder="item.inputTips || `请输入${item.name}`"
            show-word-limit
          />
          <!-- 数字 -->
          <van-field
           class="cusField cusField1"
            v-model="item.value"
            v-else-if="
              item.formType === 'floatnumber' ||
              item.formType === 'number' ||
              item.formType === 'mobile'
            "
            type="number"
            :required="item.isNull === 1"
            :label="item.name"
            :placeholder="item.inputTips || `请输入${item.name}`"
          />
          <!-- 多选 -->
          <div class="checks" v-else-if="item.formType === 'checkbox'"
            :key="index">
            <div class="check-title">
              {{ item.name }}
              <span v-if="item.inputTips" class="input-tips">({{ item.inputTips }})</span>
              <!-- 添加必填星号 -->
              <span v-if="item.isNull === 1" class="required-star">*</span>
            </div>
            <!-- 平铺显示 -->
            <van-checkbox-group v-model="item.value" v-if="item.precisions === 1" class="checkbox-grid">
              <van-checkbox
                :name="set"
                v-for="(set, setIndex) in item.setting"
                :key="setIndex"
                >{{ set }}</van-checkbox
              >
            </van-checkbox-group>
            <!-- 下拉显示 -->
            <div v-else class="select-wrapper">
              <van-field
                readonly
                clickable
                :value="item.value.join(', ')"
                :placeholder="item.inputTips || '请选择'"
                @click="showCheckboxPicker(item)"
              />
            </div>
            <van-popup v-model="item.showPicker" position="bottom">
              <van-checkbox-group v-model="item.value" @change="onCheckboxConfirm(item)">
                <van-cell v-for="(set, setIndex) in item.setting" :key="setIndex">
                  <template #title>
                    <van-checkbox :name="set">{{ set }}</van-checkbox>
                  </template>
                </van-cell>
              </van-checkbox-group>
            </van-popup>
          </div>

          <!-- 单选 -->
          <div
            class="checks"
            v-else-if="item.formType === 'select' && item.fieldName !== 'source' && item.fieldName !== 'branchOffice'"
            :key="index"
          >
          <div class="check-title">
            {{ item.name }}
            <span v-if="item.inputTips" class="input-tips">({{ item.inputTips }})</span>
            <!-- 添加必填星号 -->
            <span v-if="item.isNull === 1" class="required-star">*</span>
          </div>
            <!-- 平铺显示 -->
            <van-radio-group v-model="item.value" v-if="item.precisions === 1" class="radio-grid" required>
              <van-radio
                :name="set"
                v-for="(set, setIndex) in item.setting"
                :key="setIndex"
                >{{ set }}</van-radio
              >
            </van-radio-group>
            <!-- 下拉显示 -->
            <div v-else class="select-wrapper">
              <van-field
                readonly
                clickable
                :value="item.value"
                :placeholder="item.inputTips || '请选择'"
                @click="showRadioPicker(item)"
              />
            </div>
            <van-popup v-model="item.showPicker" position="bottom">
              <van-radio-group v-model="item.value" @change="onRadioConfirm(item)">
                <van-cell v-for="(set, setIndex) in item.setting" :key="setIndex">
                  <template #title>
                    <van-radio :name="set">{{ set }}</van-radio>
                  </template>
                </van-cell>
              </van-radio-group>
            </van-popup>
          </div>

          <!-- 年月日 -->
          <div class="time" v-else-if="item.formType === 'date'" :key="index">
            <van-cell
              :required="item.isNull === 1"
              :title="item.name"
              is-link
              :value="item.value"
              @click="clickDate(item)"
            />
            <van-popup
              v-model="item.popupShow"
              position="bottom"
              :style="{ height: '40%' }"
            >
              <van-datetime-picker
                v-model="item.dateValue"
                :min-date="minDate"
                :max-date="maxDate"
                type="date"
                @confirm="confirm(item)"
                @cancel="cancel(item)"
              />
            </van-popup>
          </div>
          <!-- 年月日时分秒 -->
          <div
            class="time"
            v-else-if="item.formType === 'datetime'"
            :key="index"
          >
            <van-cell
              :required="item.isNull === 1"
              :title="item.name"
              is-link
              :value="item.value"
              @click="clickDateTime(item)"
            />
            <van-popup
              v-model="item.popupShow"
              position="bottom"
              :style="{ height: '40%' }"
            >
              <van-datetime-picker
                v-model="item.dateValue"
                type="datetime"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="confirmTime(item)"
                @cancel="cancelTime(item)"
              />
            </van-popup>
          </div>
          <!-- 关注度评价 -->
          <div
            class="lan"
            v-else-if="item.formType === 'field_attention'"
            :key="index"
          >
            <van-field name="rate" :label="item.name" class="cusField">
              <template #input>
                <van-rate
                  v-model="item.value"
                  :size="25"
                  color="#ffd21e"
                  void-icon="star"
                  allow-half
                  void-color="#eee"
              /></template>
            </van-field>
          </div>
          <!-- 图片上传 -->
          <div class="lan" v-else-if="item.formType === 'pic'" :key="index">
            <van-field
              class="cusField uploadField"
              :label="item.name"
              name="imgUploader"
              :required="item.isNull === 1"
            >
              <template #input>
                <el-upload
                  list-type="picture-card"
                  accept="image/*"
                  :file-list="item.value"
                  :on-remove="(file, fileList) => handleRemove(file, fileList, index)"
                  :http-request="(file) => uploadImage(file, index)"
                  :limit="5"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </template>
            </van-field>
          </div>
          <!-- 附件上传 -->
          <div class="lan" v-else-if="item.formType === 'file'" :key="index">
            <van-field
              class="cusField uploadField"
              :label="item.name"
              :required="item.isNull === 1"
            >
              <template #input>
                <el-upload
                  class="upload-demo"
                  :file-list="item.value"
                  :on-remove="(file, fileList) => handleRemoveDocFileList(file, fileList, index)"
                  :http-request="(file) => uploadDoc(file, index)"
                  :on-change="handleChange"
                  :limit="5"
                >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">上传文件，且不超过50mb</div>
              </el-upload>
              </template>
            </van-field>
          </div>
          <!-- 分割线 -->
          <div
            class="lan"
            v-else-if="item.formType === 'field_group'"
            :key="index"
          >
            <div
              class="cusdivider"
              :style="{
                color: '#1989fa',
                borderColor: '#1989fa',
                padding: '0 16px',
              }"
            >
              <div
                :style="`width: ${$toRem(6)}; height:  ${$toRem(
                  16
                )}; background-color: #2362fb;margin-right:${$toRem(8)};`"
              />
              <span>{{ item.name }}({{ item.inputTips }})</span>
            </div>
          </div>
          <!-- 地址-->
          <div
            class="lan"
            v-else-if="item.formType === 'position'"
            :key="item.fieldId"
          >
            <van-field
              readonly
              clickable
              name="area"
              :label="item.name"
              :value="item.value"
              :placeholder="item.inputTips || `请输入${item.name}`"
              @click="openAreaPicker(item.fieldId)"
              :required="item.isNull === 1"
            />

            <van-field
              v-if="item.precisions === 1"
              :required="item.isNull === 1"
              v-model="fullAddress"
              label="详细地址"
              placeholder="请输入详细地址"
            />
            <van-popup
              v-model="activeAreaPickers[item.fieldId]"
              position="bottom"
            >
              <van-area
                :columns-num="getColumnsNum(item.precisions)"
                :required="item.isNull === 1"
                :area-list="areaList"
                @confirm="(values) => handleAreaConfirm(values, item)"
                @cancel="activeAreaPickers[item.fieldId] = false"
              />
            </van-popup>
          </div>
        </div>
        <div class="btn" @click="save">保存</div>
      </div>
    </div>
    <!-- 成功组件 -->
    <SuccessPage v-if="isSucc" />
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import { GetField, SendSms, uploadApi, SaveCustomer } from '@/http/api.js'
import SuccessPage from '@/components/successPage.vue'
// import UpLoad from '@/components/upLoad.vue'
export default {
  name: 'JoinInfo',
  components: {
    SuccessPage
    // UpLoad
  },
  data () {
    return {
      // 新增数据项
      areaList,
      value: '',
      showArea: false,
      phone: '',
      code: '', // 验证码
      fullAddress: '', // 详细地址
      rateNum: '', // 评分
      imgUploader: [], // 上传图片
      fileUploader: [], // 附件上传
      countdown: 0,
      phoneValid: false,
      codeValid: false,
      phoneError: '',
      codeError: '',
      mainPicList: [],
      webUrl: '',
      swiperHeight: (document.body.clientWidth * 220) / 290,
      isSucc: false,
      lists: [],
      minDate: new Date('2000-01-01'),
      maxDate: new Date(),
      // phone: '',
      yzmBtnText: '获取验证码',
      isDisabledYzmBtn: false,
      isDisabledCode: false,
      activeAreaPickers: {}, // 存储每个地址选择器的激活状态
      areaValues: {}, // 存储每个地址的值
      items: [], // 你的表单数据数组
      ImageFileList: [],
      docFileList: [],
      showPicker: false,
      isPhoneValid: false,
      isCodeValid: false,
      branchOfficeMap: {
        '北京': ['北京市', '天津市', '河北省', '山东省', '内蒙古自治区'],
        '上海': ['江苏省', '浙江省', '安徽省', '上海市'],
        '深圳': ['广东省', '广西壮族自治区', '海南省', '福建省', '江西省', '香港特别行政区', '澳门特别行政区', '台湾省'],
        '成都': ['四川省', '重庆市', '云南省', '贵州省', '西藏自治区'],
        '长春': ['辽宁省', '吉林省', '黑龙江省'],
        '西安': ['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '山西省'],
        '郑州': ['湖北省', '湖南省', '河南省'],
        '国际': ['国外']
      }
    }
  },
  watch: {
    'lists': {
      handler (newVal) {
        this.updateLeadsName()
      },
      deep: true
    }
  },
  created () {
    this.getFieldLists()
    this.initSwiperSize()
  },
  mounted () {
    if (window.innerWidth >= 1000) {
      setTimeout(() => {
        this.$refs.swipeImgRef.forEach((img) => {
          img.style.objectFit = 'contain'
        })
      }, 1000)
    } else {
      this.$refs.swipeImgRef.forEach((img) => {
        img.style.objectFit = 'cover'
      })
    }
  },
  methods: {
    // 添加新方法用于更新leadsName
    updateLeadsName () {
      const nameField = this.lists.find(item => item.fieldName === 'fieldName' && item.formType === 'text')
      const platformField = this.lists.find(item => item.fieldName === 'fieldQeefkp' && item.formType === 'select')
      const leadsNameField = this.lists.find(item => item.fieldName === 'leadsName' && item.formType === 'text')

      if (nameField && platformField && leadsNameField) {
        const name = nameField.value || ''
        const platform = platformField.value || ''
        leadsNameField.value = `${name}${platform}`
      }
    },
    handleRemove (file, fileList, index) {
      this.$set(this.lists[index], 'value', fileList)
      console.log(file, fileList)
    },
    async  uploadImage (file, index) {
      const formData = new FormData()
      formData.append('file', file.file)
      // const res = await uploadApi(formData)
      // console.log(res)
      try {
        const res = await uploadApi(formData)
        const newFile = {
          name: res.name,
          url: res.url,
          status: 'success',
          uid: file.file.uid
        }
        if (!this.lists[index].value) {
          this.$set(this.lists[index], 'value', [])
        }
        this.lists[index].value.push(newFile)
      } catch (error) {
        console.error('上传失败:', error)
      }
    },
    handleRemoveDocFileList (file, fileList, index) {
      this.$set(this.lists[index], 'value', fileList)
      console.log(file, fileList)
    },
    handleChange (file, fileList) {
      this.fileList = fileList.slice(-3)
    },
    async  uploadDoc (file, index) {
      const formData = new FormData()
      formData.append('file', file.file)
      try {
        const res = await uploadApi(formData)
        const newFile = {
          name: res.name,
          url: res.url,
          status: 'success',
          uid: file.file.uid
        }
        if (!this.lists[index].value) {
          this.$set(this.lists[index], 'value', [])
        }
        this.lists[index].value.push(newFile)
      } catch (error) {
        console.error('上传失败:', error)
      }
    },
    // 省市区区分
    getColumnsNum (precisions) {
      const map = {
        4: 1, // 当 precisions=4 时显示省选择（1级）
        3: 2, // 当 precisions=3 时显示省市选择（2级）
        2: 3, // 当 precisions=2 时显示省市区选择（3级）
        1: 3 // 当 precisions=1 时也显示省市区选择（3级）
      }
      return map[precisions] || 3 // 默认返回3级选择
    },
    openAreaPicker (fieldId) {
      this.$set(this.activeAreaPickers, fieldId, true)
    },

    handleAreaConfirm (values, item) {
      // 1. 格式化地址
      const selectedArea = values
        .filter(Boolean)
        .map((a) => a.name)
        .join('/')

      // 2. 使用 Vue.set 确保响应式更新
      this.$set(item, 'value', selectedArea)

      // 3. 关闭当前picker
      this.activeAreaPickers[item.fieldId] = false

      // 4. 如果是areaName字段，需要匹配分公司
      if (item.fieldName === 'areaName') {
        this.matchBranchOffice(selectedArea)
      }
    },

    matchBranchOffice (area) {
      // 获取省份名称（第一个值）
      const province = area.split('/')[0]

      // 找到branchOffice字段
      const branchOfficeField = this.lists.find(
        item => item.formType === 'select' && item.fieldName === 'branchOffice'
      )

      if (!branchOfficeField) return

      // 如果branchOffice只有一个选项，直接使用该选项
      if (branchOfficeField.setting && branchOfficeField.setting.length === 1) {
        this.$set(branchOfficeField, 'value', branchOfficeField.setting[0])
        return
      }

      // 如果是国外，直接设置为国际分公司
      if (province === '国外') {
        this.$set(branchOfficeField, 'value', '国际')
        return
      }

      // 查找匹配的分公司
      let matchedBranch = '国际' // 默认国际
      for (const [branch, provinces] of Object.entries(this.branchOfficeMap)) {
        if (provinces.includes(province)) {
          matchedBranch = branch
          break
        }
      }

      // 更新分公司字段
      this.$set(branchOfficeField, 'value', matchedBranch)
    },

    initSwiperSize () {
      let that = this
      window.addEventListener('resize', function () {
        // 获取当前窗口的宽度和高度
        if (window.innerWidth >= 1000) {
          that.$refs.swipeImgRef.forEach((img) => {
            img.style.objectFit = 'contain'
          })
        } else {
          that.$refs.swipeImgRef.forEach((img) => {
            img.style.objectFit = 'cover'
          })
        }
      })
    },
    isInnerWidth (that) {
      console.log(that.$refs)
    },
    /**
     * 获取字段列表
     */
    getFieldLists () {
      this.$toast.loading({
        mask: true,
        duration: 0,
        message: '加载中...'
      })
      var params = this.$route.query
      GetField(params)
        .then((res) => {
          this.mainPicList = res.mainFileList || []
          this.webUrl = res.webUrl || ''
          this.lists = res.list.map((item) => {
            if (item.formType === 'date' || item.formType === 'datetime') {
              item.dateValue = ''
              item.popupShow = false
            }
            // 设置默认值
            if (item.formType === 'select' && item.defaultValue) {
              item.value = item.defaultValue
            } else {
              item.value = item.formType === 'checkbox' ? [] : ''
            }
            // 如果是线索来源，设置默认值但不显示
            if (item.fieldName === 'source' && item.formType === 'select') {
              item.value = item.defaultValue || item.setting[0] // 使用默认值或第一个选项
            }
            // 如果是地址字段，添加国外选项
            if (item.fieldName === 'areaName' && item.formType === 'position') {
              // 确保areaList中有国外选项
              if (!this.areaList.province_list['国外']) {
                this.areaList.province_list['国外'] = '国外'
                this.areaList.city_list['国外'] = {
                  '国外': '国外'
                }
                this.areaList.county_list['国外'] = {
                  '国外': '国外'
                }
              }
            }
            return item
          })
          this.$toast.clear()
        })
        .catch(() => {})
    },

    /**
     * 保存
     */
    save () {
      // 检查是否存在手机号输入框
      const hasPhoneField = this.lists.some(item => item.formType === 'boolean_value' && item.defaultValue === '1')

      // 只有在有手机号输入框的情况下才进行验证
      if (hasPhoneField) {
        if (!this.phone) {
          return this.$toast('请输入手机号')
        }
        if (!this.regexIsMobile(this.phone)) {
          return this.$toast('请输入正确的手机号')
        }
        if (this.isDisabledCode && !this.code) {
          return this.$toast('请输入验证码')
        }
      }

      console.log('保存:')
      this.$toast.loading({
        mask: true,
        duration: 0,
        message: '提交中...'
      })

      let params = {
        field: [],
        entity: {}
      }
      for (let index = 0; index < this.lists.length; index++) {
        let item = this.lists[index]
        item = { ...item }
        if (item.formType === 'checkbox') {
          item.value = item.value.join(',')
        }
        if (item.formType === 'pic' || item.formType === 'file') {
          item.value = Array.isArray(item.value) ? item.value.map(file => file.url).join(',') : ''
        }

        // 验证必填
        if (item.isNull === 1 && !item.value) {
          console.log()
          this.$toast(`请输入${item.name}`)
          return
        }

        if (
          item.formType === 'email' &&
          item.value &&
          !this.regexIsEmail(item.value)
        ) {
          this.$toast(`请输入正确的邮箱`)
          return
        }

        if (
          item.formType === 'phone' &&
          item.value &&
          !this.regexIsMobile(item.value)
        ) {
          this.$toast(`请输入正确的手机号`)
          return
        }

        if (item.fieldType === 1) {
          params.entity[item.fieldName] = item.value
        } else {
          params.field.push(item)
        }
      }

      let device = localStorage.getItem('device')
      if (!device) {
        device = this.randomWord(false, 19) + new Date().getTime()
        localStorage.setItem('device', device)
      }

      const from = {
        fieldInfo: params,
        code: this.code,
        phone: this.phone,
        device: device,
        ...this.$route.query
      }

      console.log('保存信息:', from, this.code, this.phone)
      SaveCustomer(from)
        .then((res) => {
          console.log('保存:', res)
          if (this.webUrl) {
            let url = this.webUrl
            if (!url.startsWith('http://') && !url.startsWith('https://')) {
              url = 'https://' + url
            }
            console.log('跳转URL:', url)
            window.location.href = url
          }
          this.isSucc = true
          this.$toast.clear()
        })
        .catch(() => {
          this.$toast.clear()
          // this.$toast(`请输入正确的手机号`)
        })
    },

    /**
     * 验证手机号和邮箱
     */
    regexIsMobile (mobile) {
      var regex =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
      if (!regex.test(mobile)) {
        return false
      }
      return true
    },

    regexIsEmail (email) {
      // eslint-disable-next-line no-useless-escape
      var regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      if (!regex.test(email)) {
        return false
      }
      return true
    },

    randomWord (randomFlag, min, max) {
      let str = ''
      let range = min
      let arr = [
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        'a',
        'b',
        'c',
        'd',
        'e',
        'f',
        'g',
        'h',
        'i',
        'j',
        'k',
        'l',
        'm',
        'n',
        'o',
        'p',
        'q',
        'r',
        's',
        't',
        'u',
        'v',
        'w',
        'x',
        'y',
        'z',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ]

      // 随机产生
      if (randomFlag) {
        range = Math.round(Math.random() * (max - min)) + min
      }
      for (let i = 0; i < range; i++) {
        let index = Math.round(Math.random() * (arr.length - 1))
        str += arr[index]
      }
      return str
    },

    /**
     * 选择日期
     */
    clickDate (item) {
      item.popupShow = true
    },

    clickDateTime (item) {
      item.popupShow = true
    },

    dateFormatter (type, value) {
      if (!value) {
        return value
      }
      var date = value
      var year = date.getFullYear()
      var month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      if (type === 'date') {
        return year + '-' + month + '-' + day
      } else {
        var hour =
          date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        var minite =
          date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        var second =
          date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return (
          year +
          '-' +
          month +
          '-' +
          day +
          ' ' +
          hour +
          ':' +
          minite +
          ':' +
          second
        )
      }
    },

    /**
     * 确认选择日期
     */
    confirm (item) {
      item.popupShow = false
      item.value = this.dateFormatter('date', item.dateValue)
    },

    /**
     * 取消选择日期
     */
    cancel (item) {
      item.popupShow = false
    },

    /**
     * 确认选择时间
     */
    confirmTime (item) {
      item.popupShow = false
      item.value = this.dateFormatter('datetime', item.dateValue)
    },

    /**
     * 取消选择日期
     */
    cancelTime (item) {
      item.popupShow = false
    },
    getCode () {
      console.log(this.phone)
      if (this.phone === '' || this.phone === null) {
        return this.$toast('请输入手机号后获取验证码')
      }
      if (!this.regexIsMobile(this.phone)) {
        return this.$toast('请输入正确手机号码')
      }
      SendSms({ phone: this.phone })
        .then((res) => {
          this.isDisabledYzmBtn = true
          let time = 60
          const timer = setInterval(() => {
            time--
            this.yzmBtnText = time + 's后重发'
            if (time === 0) {
              this.isDisabledYzmBtn = false
              this.yzmBtnText = '获取验证码'
              clearInterval(timer)
            }
          }, 1000)
          this.isDisabledCode = true
          console.log('成功调用', res)
        })
        .catch((err) => {
          console.log('错误调用', err)
        })
    },
    showCheckboxPicker (item) {
      this.$set(item, 'showPicker', true)
    },
    onCheckboxConfirm (item) {
      item.showPicker = false
    },
    showRadioPicker (item) {
      this.$set(item, 'showPicker', true)
    },
    onRadioConfirm (item) {
      item.showPicker = false
    },
    validatePhone () {
      this.phoneError = ''
      if (!this.phone) {
        this.phoneError = '请输入手机号'
        this.isPhoneValid = false
        return
      }
      if (!this.regexIsMobile(this.phone)) {
        this.phoneError = '请输入正确的手机号'
        this.isPhoneValid = false
        return
      }
      this.isPhoneValid = true
    },
    validateCode () {
      this.codeError = ''
      if (!this.code) {
        this.codeError = '请输入验证码'
        this.isCodeValid = false
        return
      }
      if (this.code.length !== 6) {
        this.codeError = '验证码长度应为6位'
        this.isCodeValid = false
        return
      }
      this.isCodeValid = true
    }
  }
}
</script>

<style scoped lang="scss">
// 样式重置
// .van-swipe__track {
//   .van-swipe-item img {
//     // width: 100% !important;
//     height: 100% !important;
//   }
// }
.info-pic {
  width: 100%;
}
.form-box {
  width: 100%;
  padding: 0 12.5px;
  box-sizing: border-box;
  background-color: #f5f5f5;
  margin-bottom: 60px;
  .title {
    font-size: 16px;
    color: #2362fb;
    text-align: center;
    padding-top: 22.5px;
    padding-bottom: 17px;
  }
  .van-cell {
    margin-bottom: 10px;
  }
}

.van-popup {
  background-color: rgba(255, 255, 255, 0) !important;
}

.checks {
  width: 100%;
  background-color: #fff;
  font-size: 12px;
  box-sizing: border-box;
  padding: 19px 16px 15px;
  margin-bottom: 10px;
  .check-title {
    position: relative;
    font-size: 16px;
    color: #444444;
    text-align: left;
    margin-bottom: 15px;
  }
}

.select-wrapper {
  ::v-deep .van-field {
    padding: 0;
    .van-field__control {
      min-height: 36px;
    }
    .van-field__label {
      display: none;
    }

  }
    ::v-deep .van-field__control--right {
    text-align: left;
  }
}

.lan {
  margin-bottom: 20px;
  .cusdivider {
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 0 !important;
  }
}

.btn {
  width: 100%;
  font-size: 16px;
  color: #fff;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #2362fb;
  border-radius: 3px;
  margin-bottom: 20px;
}
.yzmBtn {
  width: 100%;
  font-size: 12px;
}
.el-row {
  height: 46px;
  overflow: hidden;
}
.van-swipe-item {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

::v-deep .van-field__textarea-label {
  font-size: 16px !important;
  font-weight: normal;
  text-align: left;
  background-color: #fff;
}

::v-deep .van-checkbox {
  margin-bottom: 4px;
}
::v-deep .van-radio {
  margin-bottom: 4px;
}
::v-deep .cusField {
  .van-field__label {
    max-width: none;
    text-align: left;
  }
  .van-field {
    flex-direction: column;
  }
  .van-rate {
    text-align: left;
  }
  .van-uploader__wrapper {
    margin-left: 0;
  }
}

.cusField1 {
  ::v-deep .van-field__control--right {
    text-align: left;
  }
}
.uploadField {
  ::v-deep .van-field__control {
    overflow-x: auto;
    width: 100%;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    // > div,
    // > div ul {
    //   display: flex;
    //   justify-content: start;
    //   flex-wrap: wrap;
    // }
  }
}
.time{
  text-align: left;
}
.required-star {
  color: #ee0a24;
  margin-left: 3px;
}
.upload-demo{
  padding-top: 15px;
  text-align: left;
}
.input-tips {
  font-size: 12px;
  color: #999;
  margin-left: 5px;
}
.checkbox-grid,
.radio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px 0;
}

::v-deep .van-checkbox,
::v-deep .van-radio {
  margin: 0;
  padding: 8px 0;
}

::v-deep .van-cell {
  padding: 10px 16px;
}

::v-deep .van-field__error-message {
  position: absolute;
  font-size: 12px;
  color: #ee0a24;
  margin-top: 2px;
}

::v-deep .van-field--error {
  .van-field__control {
    color: #ee0a24;
  }
}
</style>
